<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/order.css">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>订单管理</legend>
        <div class="layui-field-box">
            <div class="layui-card">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">
                        <input type="hidden" name="type" value="{$type}">
                        <input type="hidden" name="active_id" value="{$active_id}">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单信息</label>
                            <div class="layui-input-inline" style="width: 210px;">
                                <input type="text" name="info" value="{$info}" placeholder="订单号/用户手机号" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0" {eq name='$status' value='0'}selected{/eq}>待付款</option>
                                    <option value="1" {eq name='$status' value='1'}selected{/eq}>待发货</option>
                                    <option value="2" {eq name='$status' value='2'}selected{/eq}>待收货</option>
                                    <option value="3" {eq name='$status' value='3'}selected{/eq}>已完成</option>
                                    <option value="4" {eq name='$status' value='4'}selected{/eq}>已关闭</option>
                                    <option value="5" {eq name='$status' value='5'}selected{/eq}>退款</option>
                                    <option value="6" {eq name='$status' value='6'}selected{/eq}>活动中</option>
                                    <option value="7" {eq name='$status' value='7'}selected{/eq}>到店领取</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div style="padding: 10px 10px 0 10px;">
                {if condition="$type eq 1"}
                <button class="layui-btn layuiadmin-btn-useradmin layui-btn-sm" data-type="whole">全部: {$count[0]}</button>
                <button class="layui-btn layuiadmin-btn-useradmin layui-btn-sm" data-type="success">成功: {$count[1]}</button>
                <button class="layui-btn layuiadmin-btn-useradmin layui-btn-sm" data-type="error">失败: {$count[2]}</button>
                <button class="layui-btn layuiadmin-btn-useradmin layui-btn-sm" data-type="loading">进行中: {$count[3]}</button>
                {else/}
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="type" data-value="0">全部订单</button>
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="type" data-value="3">拼团订单</button>
                <button class="layui-btn layuiadmin-btn-useradmin" data-type="type" data-value="4">秒杀订单</button>
                {/if}
                </div>
                <div class="layui-card-body">

                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th class="center">订单详情</th>
                            <th class="center" width="100">收货人</th>
                            <th class="center" width="60">金额</th>
                            <th class="center" width="100">订单状态</th>
                            <th class="center" width="120">操作</th>
                        </tr>
                        </thead>
                    </table>
                    {volist name='list' id='vo'}
                    <table class="layui-table table">
                        <thead>
                        <tr style="background-color: #f7f7f7;">
                            <th colspan="5">
                                {$vo.time|date='Y/m/d H:i:s', ###}&nbsp;&nbsp;&nbsp;&nbsp;<i>订单号</i>: {$vo.order}&nbsp;&nbsp;&nbsp;&nbsp;
                                {switch name="vo.type" }
                                {case value="0"}<span style="color: #895612;">[普通订单]</span>{/case}
                                {case value="1"}<span style="color: #895612;">[打卡订单]</span>{/case}
                                {case value="2"}<span style="color: #8139af;">[砍价订单]</span>{/case}
                                {case value="3"}<span style="color: {$vo.color ?? '#457856'};">[拼团订单]{$vo.msg ?? ''}</span>{/case}
                                {case value="4"}<span style="color: #32c5e9;">[秒杀订单]</span>{/case}
                                {case value="5"}<span style="color: #ffbc63;">[全返订单]</span>{/case}
                                {case value="6"}<span style="color: #0986c3;">[N元购订单]</span>{/case}
                                {default /}<span style="color: #895612;">[普通订单]</span>
                                {/switch}

                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="padding: 15px;">
                                {volist name='vo.lower' id='voo'}
                                <div class="flex">
                                    <img class="img" src="/uploads/{$voo.img}">
                                    <div class="info">
                                        <div class="inline">{$voo.name}</div>
                                        <div class="fl">x{$voo.num}</div>
                                        <div class="spec">规格/型号:{$voo.spec}</div>
                                    </div>
                                </div>
                                {/volist}
                            </td>
                            <td class="center ups" width="100">
                                <a href="javascript:;" class="shou">{$vo.username}
                                    <div class="zuoce">
                                        <span class="arrow"></span>
                                        {$vo.username}<br>{$vo.address}<br>{$vo.phone}
                                    </div>
                                </a>
                                <i class="layui-icon layui-icon-username"></i>
                            </td>
                            <td class="center ups" width="60">订单总额￥{$vo.money}</td>
                            <td class="center ups" width="100">
                                <p>
                                    {switch name="vo.status" }
                                    {case value="0"}待付款{/case}
                                    {case value="1"}待发货{/case}
                                    {case value="2"}待收货{/case}
                                    {case value="3"}已完成{/case}
                                    {case value="4"}已关闭{/case}
                                    {case value="5"}退款{/case}
                                    {case value="6"}活动中{/case}
                                    {case value="7"}到店领取{/case}
                                    {default /}待付款
                                    {/switch}
                                </p>
                                <p><a style="color: #337ab7;" lay-href="/admin/Product/order_operate/id/{$vo.id}">订单详情</a></p>
                                {if condition="$type eq 1"}
                                <p><a style="color: #337ab7;cursor:pointer;" class="qiandao" data-id="{$vo.id}">签到数据</a></p>
                                {/if}
                                <!--<p><a style="color: #337ab7;" href="" target="_blank">打印订单</a></p>-->
                            </td>
                            <td class="center ups" width="120">
                                {if condition="$vo.status eq 1"}
                                <button class="layui-btn layui-btn-normal layui-btn-xs confirm" data-id="{$vo.id}">确认发货</button>
                                {elseif condition="$vo.status eq 2"}
                                <button class="layui-btn layui-btn-normal layui-btn-xs shouhuo" data-id="{$vo.id}">确认收货</button>
                                {/if}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    {/volist}
                    {$list->render()}
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'useradmin', 'table'], function(){
        var $ = layui.$,
                form = layui.form,
                table = layui.table;

        //监听搜索
        form.on('submit(LAY-app-contlist-search)', function(data){
            var field = data.field;
            //执行重载
            window.location = "/admin/Product/order?field="+JSON.stringify(field);
        });

        //点击放大图片
        $(document).on('click', '.img', function (){
            var img = $(this).attr('src');
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['auto', 'auto'],
                offset: ['20%', '30%'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<img src="'+img+'" style="width: 400px;height: 400px;">'
            });
        });

        //签到信息
        $(".qiandao").click(function (){
            var id = $(this).data('id');
            layer.open({
                type: 2
                ,title: '签到信息'
                ,content: '/admin/Product/qian/id/' + id
                ,maxmin: true
                ,area: ['100%', '100%']
                ,btn: '关闭'
                ,btnAlign: 'c'
            });
        });

        //移入收货人信息
        $(".shou").mouseenter(function (){
            $(this).find('div').show();
        }).mouseleave(function (){
            $(this).find('div').hide();
        });

        //确认发货
        $(".confirm").click(function (){
            var id = $(this).data('id');
            layer.open({
                type: 2
                ,title: '订单发货'
                ,content: '/admin/Product/order_delivery/id/' + id
                ,maxmin: true
                ,offset: ['18%', '28%']
                ,area: ['550px', '500px']
                ,btn: ['发货', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                    submit.click();
                }
            });

        });

        //确认收货
        $(".shouhuo").click(function (){
            var id = $(this).data('id');
            layer.confirm('确认收货吗?', {
                title: '订单收货',
                btn: ['收货', '取消'],
                btnAlign: 'c'
            }, function(index){
                //do something
                $.post("{:url('Product/order_collect')}", {id:id}, function (e){
                    if (e == 1){
                        layer.msg('收货成功', {offset: ['30%', '40%']});
                        setTimeout(function () {
                            location.reload(); //重载表格
                            parent.layer.close(index); //再执行关闭
                        }, 500)
                    }else{
                        layer.msg('收货失败', {offset: ['30%', '40%']});
                    }
                });
            });


        });

        //事件
        var active = {
            whole: function(){
                var field = {};
                field.active_id = $("input[name=active_id]").val();
                field.info = $("input[name=info]").val();
                field.status = $("select[name=status] option:selected").val();
                field.type = $("input[name=type]").val();
                field.active_status = 1;
                //执行重载
                window.location = "/admin/Product/order?field="+JSON.stringify(field);
            },
            success: function(){
                var field = {};
                field.active_id = $("input[name=active_id]").val();
                field.info = $("input[name=info]").val();
                field.status = $("select[name=status] option:selected").val();
                field.type = $("input[name=type]").val();
                field.active_status = 2;
                //执行重载
                window.location = "/admin/Product/order?field="+JSON.stringify(field);
            },
            error: function(){
                var field = {};
                field.active_id = $("input[name=active_id]").val();
                field.info = $("input[name=info]").val();
                field.status = $("select[name=status] option:selected").val();
                field.type = $("input[name=type]").val();
                field.active_status = 3;
                //执行重载
                window.location = "/admin/Product/order?field="+JSON.stringify(field);
            },
            loading: function(){
                var field = {};
                field.active_id = $("input[name=active_id]").val();
                field.info = $("input[name=info]").val();
                field.status = $("select[name=status] option:selected").val();
                field.type = $("input[name=type]").val();
                field.active_status = 4;
                //执行重载
                window.location = "/admin/Product/order?field="+JSON.stringify(field);
            },
            type: function(){
                var field = {};
                field.type = $(this).data('value');
                //执行重载
                window.location = "/admin/Product/order?field="+JSON.stringify(field);
            }
        };

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

</script>
</body>
</html>
